<template>
	<view class="record-info page-content ">
		<nav-bar back >
			分类
		</nav-bar>
		<!-- <component :is="componentName"></component> -->
		<view class="page-main recordBox">
			<view class="record-item middleCenter" v-for=" item in recordList">
				<view class="record-item-content middleCenter" @click="recordClick(item)">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {recordList} from '@/utils/config.js'
	import {ref,onMounted} from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app';
	const recordClick = (item)=>{
		console.log('点击',item)
		if(item.dev){
			uni.navigateTo({
				url: `/pages/tabbar/tabbar-3/recordDetail/recordDetail?type=${item.key}`
			});
		}else{
			uni.showToast({
				title: '开发中',
				duration: 1000
			});
		}
		
	}
	let imgPath =ref('');
	onShow(()=>{
		console.log(uni.getStorageSync('FormulaMilk'),'FormulaMilk');
		imgPath.value=uni.getStorageSync('cachedImagePath')
		console.log(imgPath,'imgPath,图片路径');
	})
	
</script>

<style lang="scss">
	.recordBox{
		padding-top: 20upx;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr; /* 定义三列，每列宽度相等 */
		grid-template-rows: auto; /* 每行高度自动适应内容 */
		gap: 10px; /* 设置网格之间的间距 */
		.record-item{
				text-align: center;
				.record-item-content{
					width: 130upx;
					height: 130upx;
					border: 1px solid #ccc;
					border-radius: 100%;
					background-color: lightblue;
					font-size: 18upx;
				}
		}
	}
	
	
</style>